<template>
	<div>
		<span class="workes-my-wrod">我的项目</span>
		<div class="workes-wrap" v-for="(item,index) in listWorks":key="index">
			<div class="workes-wrap-card" @click="jietu(index)">
				<div class="workes-wrap-cardtwo">
					<span class="card-title"><van-icon name="fire" color="#ff0509"/> {{item.titles}}</span>
					<span class="card-jieshao">{{item.jieshao}}</span>
				</div>
				<div class="workes-wrap-cardthree">
					<span class="card-jietu">点击查看截图</span>
					<span class="card-jietu"><van-icon name="arrow" /></span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	export default{
		data(){
			return{
				listWorks:[
					{
						"titles":"树洞小程序",
						"jieshao":"使用uni-app配合腾讯云开发实现西安高新科技职业学院树洞小程序，内容丰富、可发表展示，收藏点赞等完整示例朋友圈功能"
						
					},
					{
						"titles":"飞猪旅行+后台管理",
						"jieshao":"使用uni-app配合腾讯云开仿飞猪旅行小程序，利用百度地图开放平台实现定位功能，以及后台商家管理系统，功能较为完善"
						
					},
					{
						"titles":"H5版App",
						"jieshao":"将开发的网页完整打包H5版App，包括vue开发的多款静态项目和本App,正常运行"
						
					},
					{
						"titles":"哔哩哔哩移动端",
						"jieshao":"使用vue框架配合Vant仿bilibili移动端,利用别人提供的后台接口，熟练的掌握了前后端交互"
						
					},
					{
						"titles":"网站开发",
						"jieshao":"个人素材库站：http://wzs520.host3v.com  &&  http://gwy.net3v.net 等网站。利用Html+css+js实现多个网站的开发上传"
						
					}
				]
			}
		},
		methods:{
			jietu(index){
				if(index==0){
					this.$router.push('/SD')
				}else if(index==1){
					this.$router.push('/FZ')
				}else if(index==2){
					this.$router.push('/H5')
				}else if(index==3){
					Toast({
					  message: '暂无截图',
					  overlay:"true",
					  closeOnClickOverlay:"true"
					});
				}else if(index==4){
					this.$router.push('/WZ')
				}
			}
		}
	}
</script>

<style lang="scss">
	.workes-wrap{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.workes-wrap-card{
			margin: 15px 0;
			width: 88%;
			// height: 120px;
			background-color: #ffffff;
			box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
			border-radius: 5px;
			display: flex;
			flex-direction: column;
			padding: 15px;
			box-sizing: border-box;
			.workes-wrap-cardtwo{
				display: flex;
				flex-direction: column;
			}
			.workes-wrap-cardthree{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.card-title{
				font-weight: bold;
				padding-bottom: 10px;
			}
			
			.card-jietu{
				color: #0570DB;
				padding: 8px 0;
			}
			.card-jieshao{
				line-height: 1.9;
			}
		}
	}
	.workes-my-wrod{
		font-weight: bold;
		font-size: 22px;
		padding: 25px;
	}
</style>
